<template>
  <div class="clue-status-line">
    <el-button size="medium" class="line-item" :type="status===1?'primary':(curStatus===1?'success':'')" icon="el-icon-s-flag" @click="changeStatus(1)">新建</el-button>
    <span class="el-icon-more" />
    <el-button size="medium" class="line-item" :type="status===2?'primary':(curStatus===2?'success':'')" icon="el-icon-s-flag" @click="changeStatus(2)">有效</el-button>
    <span class="el-icon-more" />
    <el-button size="medium" class="line-item" :type="status===3?'primary':(curStatus===3?'success':'')" icon="el-icon-s-flag" @click="changeStatus(3)">无效</el-button>
    <span class="el-icon-more" />
    <el-button size="medium" class="line-item" :type="status===4?'primary':(curStatus===4?'success':'')" icon="el-icon-s-flag" @click="changeStatus(4)">结束</el-button>
    <el-button size="medium" class="line-item" title="标记为当前状态" :disabled="curStatus===status||curStatus===''" icon="el-icon-refresh" @click="submitChange" >标记为当前状态</el-button>
  </div>
</template>
<script>

export default {
  name: 'ClueStatusLine',
  props: {
    status: {
      type: Number,
      default: 0
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curStatus: ''

    }
  },
  methods: {
    changeStatus(status) {
      if (this.status === 4) {
        return
      }
      if ((this.status === 2 || this.status === 3) && status === 1) {
        return
      }
      this.curStatus = status
    },
    submitChange() {
      if (this.curStatus === '' || this.status === this.curStatus) {
        return
      }
      this.$emit('change', this.curStatus)
    }

  }
}
</script>
<style lang="scss" scoped>
.clue-status-line{
  display: flex;
  align-items: center;
  .el-button.line-item {
    width: 200px;
  }
  .el-icon-more{
    margin: 0 16px;
  }

}
</style>
